@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* Chrome DevTools Theme Colors (Light Mode) */
  --color-dt-bg-primary: #ffffff;
  --color-dt-bg-secondary: #f3f3f3;
  --color-dt-bg-hover: #f9f9f9;
  --color-dt-bg-selected: #e8f0fe;
  
  --color-dt-border-light: #e0e0e0;
  --color-dt-border-dark: #d4d4d4;
  
  --color-dt-text-primary: #202124;
  --color-dt-text-secondary: #5f6368;
  --color-dt-text-tertiary: #80868b;
  
  --color-dt-accent: #1a73e8;
  --color-dt-accent-hover: #1557b0;
  
  --color-dt-status-success: #188038;
  --color-dt-status-error: #d93025;
  --color-dt-status-warning: #e37400;
  --color-dt-status-info: #1967d2;
  
  /* Method badge colors */
  --color-method-get: #1e40af;
  --color-method-post: #166534;
  --color-method-put: #9a3412;
  --color-method-delete: #991b1b;
  --color-method-patch: #6b21a8;
}

@layer theme {
  .dark {
    /* Dark Mode Overrides */
    --color-dt-bg-primary: #202124;
    --color-dt-bg-secondary: #292a2d;
    --color-dt-bg-hover: #35363a;
    --color-dt-bg-selected: #2a3f5f;
    
    --color-dt-border-light: #3c4043;
    --color-dt-border-dark: #494c50;
    
    --color-dt-text-primary: #e8eaed;
    --color-dt-text-secondary: #9aa0a6;
    --color-dt-text-tertiary: #71757a;
    
    --color-dt-accent: #8b5cf6;
    --color-dt-accent-hover: #7c3aed;
    
    --color-dt-status-success: #34a853;
    --color-dt-status-error: #ea4335;
    --color-dt-status-warning: #fbbc04;
    --color-dt-status-info: #4285f4;
    
    /* Method badge colors - dark mode */
    --color-method-get: #60a5fa;
    --color-method-post: #4ade80;
    --color-method-put: #fb923c;
    --color-method-delete: #f87171;
    --color-method-patch: #c084fc;
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    font-weight: normal;
  }

  /* Root element for smooth theme transitions */
  html {
    @apply transition-colors duration-300;
  }

  /* Dark mode class - applied by theme composable */
  html.dark {
    color-scheme: dark;
  }

  body {
    @apply min-h-screen;
    @apply bg-dt-bg-primary;
    @apply text-dt-text-primary;
    @apply leading-relaxed;
    @apply text-[15px];
    @apply antialiased;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    transition: color 0.3s ease, background-color 0.3s ease;
  }

  /* Smooth transitions for all color changes */
  * {
    @apply transition-colors duration-200;
  }

  /* Links */
  a {
    @apply text-dt-accent;
    @apply transition-colors duration-200;
  }

  /* Scrollbar styling for dark mode */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
  }
}
